<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>state的基本使用</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			/* 
					1.在开发中，初始化state一般直接使用： state = {}
					2.在开发中，把类中所有事件回调的函数，都写成箭头函数，且直接放在组件实例自身。
			*/
			class Weather extends React.Component{
				//初始化状态
				state = {isHot:true}
				
				render(){
					console.log(this)
					return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2>
				}
				
				changeWeather = ()=>{
					const {isHot} = this.state
					this.setState({isHot:!isHot})
				}
			}

			// console.dir(Weather)

			ReactDOM.render(<Weather/>,document.getElementById('test'))
		</script>
	</body>
</html>